<template>
  <section class="section">
    <el-menu :default-active="activeIndex" class="menu" mode="horizontal" :ellipsis="false">
      <el-menu-item index="0" route="{ name: 'home' }">
        <EiffelTower theme="outline" size="20" fill="#409EFF" class="mr-2" /> Liu 晶</el-menu-item
      >
      <div class="flex-1" />
      <el-menu-item index="1" @click="$router.push({ name: 'proj.list' })">工程管控</el-menu-item>
      <el-menu-item index="2" @click="$router.push({ name: 'comp.list' })">分包管控</el-menu-item>
      <el-sub-menu index="3">
        <template #title>班组管控</template>
        <el-menu-item index="2-1" @click="$router.push({ name: 'log.list' })">新进班组</el-menu-item>
        <el-menu-item index="2-2" @click="$router.push({ name: 'team.list' })">班组列表</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </section>
  <div class="view">
    <router-view />
  </div>
</template>

<script setup lang="ts">
import { EiffelTower } from '@icon-park/vue-next'
import { ref } from 'vue'

const activeIndex = ref('1')
</script>

<style lang="scss" scoped>
.section {
  @apply flex border-gray-300 m-4 box-border h-8;
  .menu {
    @apply w-full;
  }
}
.view {
  @apply py-8;
}
</style>
